<script lang="ts">
export default {
	name: "device"
};
</script>

<script setup lang="ts">
import {
deleteDeviceById,
	getDevicePage,
	updateDevice,
	updateDeviceConfig,
	getDeviceForm,
	getDeviceConfigForm,
	addDevice
} from "@/api/device";

import { DevicePageVO, DeviceForm, DeviceQuery, DeviceConfigForm } from "@/api/device/types";

const queryFormRef = ref(ElForm);
const deviceFormRef = ref(ElForm);

const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);

const queryParams = reactive<DeviceQuery>({
	pageNum: 1,
	pageSize: 10,
	name: '',
	mac: ''
});

const deviceList = ref<DevicePageVO[]>();

const dialog = reactive<DialogOption>({
	visible: false
});

const configDialog = reactive<DialogOption>({
	visible: false
});

const formData = reactive<DeviceForm>({
	ownPhones: "",
	mac: "",
	name: "",
	simMobile: ""
});

const configData = reactive<DeviceConfigForm>({
	/**
	 * 采集间隔
	 */
	cjGap: "",

	/**
	 * 记录间隔
	 */
	recordGap: "",

	/**
	 * 上报间隔
	 */
	reportGap: "",

	/**
	 * 波动间隔
	 */
	waveGap: "",

	/**
	 * 下限报警
	 */
	limitDownWarn: "",

	/**
	 * 上限报警
	 */
	limitUpWarn: "",

	/**
	 * 告警电话
	 */
	warnPhone: "",
	deviceId: 0
});
const rules = reactive({
	name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
	mac: [{ required: true, message: "请输入设备编码", trigger: "blur" }]
});


interface CheckedDevice {
	id?: number;
	name?: string;
}

let checkedDevice: CheckedDevice = reactive({});

/**
 * 查询
 */
function handleQuery() {
	loading.value = true;
	getDevicePage(queryParams)
		.then(({ data }) => {
			deviceList.value = data.list;
			total.value = data.total;
		})
		.finally(() => {
			loading.value = false;
		});
}

/**
 * 重置查询
 */
function resetQuery() {
	queryFormRef.value.resetFields();
	queryParams.pageNum = 1;
	handleQuery();
}

/**
 * 行checkbox change事件
 */
function handleSelectionChange(selection: any) {
	ids.value = selection.map((item: any) => item.id);
}

/**
 * 打开设备表单弹窗
 *
 * @param deviceId
 */
function openDialog(deviceId?: number) {
	dialog.visible = true;
	if (deviceId) {
		dialog.title = "修改设备";
		getDeviceForm(deviceId).then(({ data }) => {
			Object.assign(formData, data);
		});
	} else {
		dialog.title = "新增设备";
	}
}

function deleteDevice(deviceId?: number){
	deleteDeviceById(deviceId).then(() => {
		handleQuery();
		});
}

function openConfigDialog(deviceId?: number) {
	configDialog.visible = true;

	configDialog.title = "修改配置";
	getDeviceConfigForm(deviceId).then(({ data }) => {
		Object.assign(configData, data);
	});
}


/**
 * 设备表单提交
 */
function handleSubmit() {
	loading.value = true;
	deviceFormRef.value.validate((valid: any) => {
		if (valid) {
			const deviceId = formData.id;
			if (deviceId) {
				updateDevice(deviceId, formData)
					.then(() => {
						ElMessage.success("修改成功");
						closeDialog();
						resetQuery();
					})
					.finally(() => (loading.value = false));
			} else {
				addDevice(formData)
					.then(() => {
						ElMessage.success("新增成功");
						closeDialog();
						resetQuery();
					})
					.finally(() => (loading.value = false));
			}
		}
	});
}

/**
 * 设备配置表单提交
 */
function handleConfigSubmit() {
	loading.value = true;
	const deviceId = configData.deviceId;

	updateDeviceConfig(deviceId, configData)
		.then(() => {
			ElMessage.success("修改配置成功");
			closeConfigDialog();
			resetQuery();
		})
		.finally(() => (loading.value = false));
}

/**
 * 关闭弹窗
 */
function closeDialog() {
	dialog.visible = false;
	resetForm();
}

/**
 * 关闭弹窗
 */
function closeConfigDialog() {
	configDialog.visible = false;
	resetConfigForm();
}

/**
 * 重置表单
 */
function resetForm() {
	deviceFormRef.value.resetFields();
	deviceFormRef.value.clearValidate();

	formData.id = undefined;

}

/**
 * 重置表单
 */
function resetConfigForm() {


}

onMounted(() => {
	handleQuery();
});

</script>

<template>
	<div class="app-container">
		<div class="search">
			<el-form ref="queryFormRef" :model="queryParams" :inline="true">
				<el-form-item prop="name" label="设备名称">
					<el-input
						v-model="queryParams.name"
						placeholder="设备名称"
						clearable
						@keyup.enter="handleQuery"
					/>
				</el-form-item>


				<el-form-item prop="mac" label="设备mac">
					<el-input
						v-model="queryParams.mac"
						placeholder="设备mac"
						clearable
						@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleQuery"
					>
						<i-ep-search />
						搜索
					</el-button
					>
					<el-button @click="resetQuery">
						<i-ep-refresh />
						重置
					</el-button>
				</el-form-item>
			</el-form>
		</div>

		<el-card shadow="never">
			<template #header>
				<el-button type="success" @click="openDialog()"
				>
					<i-ep-plus />
					新增
				</el-button
				>

			</template>

			<el-table
				ref="dataTableRef"
				v-loading="loading"
				:data="deviceList"
				@selection-change="handleSelectionChange"
				highlight-current-row
				border
			>
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column label="设备Id" prop="id" min-width="100" />
				<el-table-column label="设备名称" prop="name" min-width="200" />
				<el-table-column label="imei" prop="mac" width="250" />
				<el-table-column label="sim手机号" prop="simMobile" width="250" />
				<el-table-column label="液位" prop="currentYw" width="100" />
				<el-table-column label="温度" prop="temp" width="100" />
				<el-table-column label="是否在线" prop="online" width="100" />
				<el-table-column fixed="right" label="操作" width="220">
					<template #default="scope">
						<el-button
							type="primary"
							size="small"
							link
							@click="openDialog(scope.row.id)"
						>
							<i-ep-edit />
							编辑
						</el-button>

						<el-button
							type="primary"
							size="small"
							link
							@click="openConfigDialog(scope.row.id)"
						>
							<i-ep-edit />
							参数配置
						</el-button>
							<el-button
                        		type="primary"
                        		size="small"
                        		link
                        		@click="deleteDevice(scope.row.id)"
                        	>

                        		删除设备
                        </el-button>

					</template>
				</el-table-column>
			</el-table>

			<pagination
				v-if="total > 0"
				v-model:total="total"
				v-model:page="queryParams.pageNum"
				v-model:limit="queryParams.pageSize"
				@pagination="handleQuery"
			/>
		</el-card>

		<!-- 设备表单弹窗 -->

		<el-dialog
			:title="dialog.title"
			v-model="dialog.visible"
			width="500px"
			@close="closeDialog"
		>
			<el-form
				ref="deviceFormRef"
				:model="formData"
				:rules="rules"
				label-width="100px"
			>
				<el-form-item label="设备名称" prop="name">
					<el-input v-model="formData.name" placeholder="请输入设备名称" />
				</el-form-item>

				<el-form-item label="imei" prop="mac">
					<el-input v-model="formData.mac" placeholder="请输入设备编码" />
				</el-form-item>

				<el-form-item label="管理用户" prop="ownPhones">
					<el-input v-model="formData.ownPhones" placeholder="请输入绑定人电话" />
				</el-form-item>

			   <el-form-item label="sim手机卡号" prop="ownPhones">
                	<el-input v-model="formData.simMobile" placeholder="" />
               	</el-form-item>

			</el-form>

			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="handleSubmit">确 定</el-button>
					<el-button @click="closeDialog">取 消</el-button>
				</div>
			</template>
		</el-dialog>

		<!-- 配置表单弹窗 -->
		<el-dialog
			:title="configDialog.title"
			v-model="configDialog.visible"
			width="500px"
			@close="closeConfigDialog"
		>
			<el-form
				:model="configData"
				label-width="100px"
			>
				<el-form-item label="采集间隔" prop="cjGap">
					<el-input v-model="configData.cjGap" placeholder="请输入采集间隔" />
				</el-form-item>

				<el-form-item label="记录间隔" prop="recordGap">
					<el-input v-model="configData.recordGap" placeholder="请输入记录间隔" />
				</el-form-item>

				<el-form-item label="上发间隔" prop="reportGap">
					<el-input v-model="configData.reportGap" placeholder="请输入上发间隔" />
				</el-form-item>

				<el-form-item label="波动报警" prop="waveGap">
					<el-input v-model="configData.waveGap" placeholder="请输入波动报警" />
				</el-form-item>

				<el-form-item label="下限报警" prop="limitDownWarn">
					<el-input v-model="configData.limitDownWarn" placeholder="请输入下限报警" />
				</el-form-item>

				<el-form-item label="上限报警" prop="limitUpWarn">
					<el-input v-model="configData.limitUpWarn" placeholder="请输入上限报警" />
				</el-form-item>


				<el-form-item label="传感器仪器灵敏度" prop="k">
					<el-input v-model="configData.k" placeholder="请输入液位传感器仪器灵敏度" />
				</el-form-item>

				<el-form-item label="温度补偿系数" prop="t">
					<el-input v-model="configData.t" placeholder="请输入温度补偿系数" />
				</el-form-item>


				<el-form-item label="大气压力基准数值" prop="q">
					<el-input v-model="configData.q" placeholder="请输入大气压力基准数值" />
				</el-form-item>


				<el-form-item label="液位传感器安装高度" prop="height">
					<el-input v-model="configData.height" placeholder="请输入液位传感器安装高度" />
				</el-form-item>


				<el-form-item label="上限报警" prop="limitUpWarn">
					<el-input v-model="configData.limitUpWarn" placeholder="请输入上限报警" />
				</el-form-item>


				<el-form-item label="告警手机号" prop="warnPhone">
					<el-input v-model="configData.warnPhone" placeholder="请输入告警手机号" />
				</el-form-item>
			</el-form>

			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="handleConfigSubmit">确 定</el-button>
					<el-button @click="closeConfigDialog">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
